<template>
  <div class="content" v-show="currentMap == 1">
    <div class="side">
      <CaseBox :title="'项目简介'">
        <template #content>
          <!-- <img src="../../assets/video.png" alt="" /> -->
          <video
            controls
            autoplay
            muted
            src="https://outin-5ea1f168894611eca06300163e1c94a4.oss-cn-shanghai.aliyuncs.com/sv/53d1a9f-19275c4edf2/53d1a9f-19275c4edf2.mp4
"
          ></video>
          <!-- <p class="project-info">简介内容简介内容简介内容简介内容简介内容简介内容简介内容简介内容简介内容简介内容简介内容简介内容简介内容简介内容简介内容简介内容简介内容简介内容简介内容简介内容简介内容简介内容简介内容简介内容简介内容简介内容。</p> -->
        </template>
      </CaseBox>
      <CaseBox :title="'项目进度'">
        <template #content>
          <div class="project" ref="projectChart"></div>
        </template>
      </CaseBox>
    </div>
    <!-- <div class="map">
      <baidu-map class="map" ak="xXgGEONo5fqg585HvS1rHIKylYfBXDVz" v="3.0" type="API" :center="{lng: 116.404, lat: 39.915}" :zoom="15">
      </baidu-map>
    </div> -->
    <div class="side">
      <CaseBox :title="'项目概况'">
        <template #content>
          <p class="project-info">
            固镇县基础设施提质升级项目—固镇县城区排水设施改造升级项目，采用工程总承包+运营模式（EPCO）。
            改造范围包括但不限于小区/企事业单位83个，市政道路55条，涉及雨污水管网改造长度约487.23公里，
            最大改造管径为DN2000，具体依据设计文件，最终实施内容以施工设计图纸为准。
            项目运维养护范围包括但不限于对老城区、南城区、北城区区域内（含本次提升改造范围）所有排水管网进行运维养护。
          </p>
        </template>
      </CaseBox>
      <CaseBox :title="'施工产值进度'">
        <template #content>
          <div class="schedule">
            <div class="output" ref="outputChart"></div>
            <!-- <span class="investment">{{463161}}</span> -->
            <div class="info">
              <p>
                <span class="label">已完成投资</span>
                <span class="count">{{ progressData.completeInvestment }}</span>
              </p>
              <p>
                <span class="label">完成占比</span>
                <span class="proportion"
                  >{{ progressData.completeProportion }}%</span
                >
              </p>
            </div>
          </div>
        </template>
      </CaseBox>
    </div>
  </div>
</template>

<script>
import CaseBox from "../../components/Case.vue";
import { onMounted, reactive, ref } from "vue";
import * as echarts from "echarts";
import { fontSizeRem } from "../../utils/chartsRem";
import request from "@/utils/request";

// import { BaiduMap } from 'vue-baidu-map-3x'

export default {
  name: "overView",
  components: {
    CaseBox,
    // BaiduMap,
  },
  setup() {
    let currentMap = ref(localStorage.getItem("currentMap"));
    window.addEventListener("storage", function (e) {
      console.log("localStorage changed:", e.key, e.newValue);
      // 这里可以根据需要进行相应的处理
      if (e.key == "currentMap") {
        currentMap.value = e.newValue;
        console.log(currentMap.value, "currentMap.value");
      }
    });
    let myChart1, myChart2;
    const progressData = reactive({
      completeInvestment: 0,
      completeProportion: 0,
      projectProgress: 0,
    });
    const projectChart = ref();
    const outputChart = ref();

    onMounted(() => {
      console.log("onMounted");
      // myChart1 = echarts.init(document.getElementsByClassName("project")[0]);
      myChart1 = echarts.init(projectChart.value);
      initChartData1();
      // myChart2 = echarts.init(document.getElementsByClassName("output")[0]);
      myChart2 = echarts.init(outputChart.value);
      initChartData2();

      window.onresize = () => {
        // 当屏幕尺寸发生改变 重新渲染 图表
        myChart1.resize();
        myChart2.resize();
      };
      setTimeout(() => {
        myChart1.resize();
        myChart2.resize();
        window.addEventListener("resize", initChartData1);
        window.addEventListener("resize", initChartData2);
      }, 500);
    });
    request.get("/base/getProgress", {}).then((res) => {
      console.log(res.data.data, "getProgress");
      let result = res.data.data;
      progressData.completeInvestment = result.completeInvestment;
      progressData.completeProportion = Number(
        String(result.completeInvestmentFormatted).slice(0, -1)
      );
      progressData.projectProgress = Number(
        String(result.projectProgress).slice(0, -1)
      );
      initChartData1();
      initChartData2();
    });
    const initChartData1 = () => {
      // console.log(String(projectProgress).slice(0,-1), typeof projectProgress,'projectProgress');
      var dataArr = progressData.projectProgress;
      console.log("屏幕尺寸改变了");
      let option = {
        title: {
          show: true,
          text: "已完成进度",
          x: "50%",
          y: "68%",
          z: 8,
          textAlign: "center",
          textStyle: {
            color: "#78EEFB",
            fontSize: fontSizeRem(0.14),
            fontWeight: "normal",
          },
        },
        series: [
          {
            name: "内部（环形）进度条",
            type: "gauge",
            center: ["50%", "40%"],
            radius: "60%",
            splitNumber: 10,
            axisLine: {
              lineStyle: {
                color: [
                  [dataArr / 100, "#61B5F7"],
                  [1, "#15648B"],
                ],
                width: fontSizeRem(0.08),
              },
            },
            axisLabel: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            pointer: {
              show: false,
            },
          },
          {
            name: "外部刻度",
            type: "gauge",
            center: ["50%", "40%"],
            radius: "70%",
            min: 0, //最小刻度
            max: 100, //最大刻度
            splitNumber: 10, //刻度数量
            startAngle: 225,
            endAngle: -45,
            axisLine: {
              show: true,
              // 仪表盘刻度线
              lineStyle: {
                width: fontSizeRem(0.01),
                color: [[1, "#0C4189"]],
              },
            },
            //仪表盘文字
            axisLabel: {
              show: false,
              // color: '#868FDF',
              distance: fontSizeRem(0.14),
              formatter: function (v) {
                switch (v + "") {
                  case "0":
                    return "0";
                  case "10":
                    return "10";
                  case "20":
                    return "20";
                  case "30":
                    return "30";
                  case "40":
                    return "40";
                  case "50":
                    return "50";
                  case "60":
                    return "60";
                  case "70":
                    return "70";
                  case "80":
                    return "80";
                  case "90":
                    return "90";
                  case "100":
                    return "100";
                }
              },
            }, //刻度标签。
            axisTick: {
              show: true,
              splitNumber: 7,
              lineStyle: {
                color: "#3C729F", //用颜色渐变函数不起作用
                width: fontSizeRem(0.01),
              },
              length: -8,
            }, //刻度样式
            splitLine: {
              show: true,
              length: -fontSizeRem(0.14),
              lineStyle: {
                color: "#3C729F", //用颜色渐变函数不起作用
              },
            }, //分隔线样式
            detail: {
              show: false,
            },
            pointer: {
              show: false,
            },
          },
          /*内部*/
          {
            type: "pie",
            radius: ["0", "43%"],
            center: ["50%", "40%"],
            z: 8,
            hoverAnimation: false,
            data: [
              {
                name: "检查进度",
                value: dataArr,
                itemStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        color: "#3C729F",
                      },
                      {
                        offset: 1,
                        color: "#1A416B",
                      },
                    ]),
                  },
                },
                label: {
                  normal: {
                    formatter: function (params) {
                      return params.value + "%";
                    },
                    color: "#FFFFFF",
                    fontSize: fontSizeRem(0.24),
                    fontWeight: "bold",
                    position: "center",
                    show: true,
                  },
                },
                labelLine: {
                  show: false,
                },
              },
            ],
          },
          /*外一层*/
          {
            type: "pie",
            radius: "45%",
            startAngle: 0,
            endAngle: 360,
            hoverAnimation: false,
            center: ["50%", "40%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            data: [
              {
                value: 1,
                itemStyle: {
                  normal: {
                    color: "#61B5F7",
                  },
                },
              },
            ],
          },
          //外二层圈
          // {
          //     type: "pie",
          //     radius: "50%",
          //     center: ['50%', '40%'],
          //     avoidLabelOverlap: false,
          //     z: 0,
          //     hoverAnimation: false,
          //     label: {
          //         show: false
          //     },
          //     labelLine: {
          //         show: false
          //     },
          //     data: [{
          //         "value": 1,
          //         itemStyle: {
          //             normal: {
          //                 color: 'rgba(66, 66, 66, .5)'
          //             }
          //         }
          //     }]
          // }
        ],
      };
      option && myChart1.setOption(option);
      // myChart1.resize();
    };
    const initChartData2 = () => {
      console.log("屏幕尺寸改变了");
      let option = {
        title: [
          {
            text: "已完成投资",
            x: "22%",
            top: "37%",
            textStyle: {
              color: "rgba(95, 187, 235, 1)",
              fontSize: fontSizeRem(0.14),
              fontWeight: "100",
            },
          },
          // {
          //   text: progressData.completeInvestment,
          //   x: "18%",
          //   y: "17%",
          //   left:'auto',
          //   right:'35%',
          //   // textAlign:'left',
          //   textStyle: {
          //     fontSize: fontSizeRem(0.24),
          //     color: "#FFFFFF",
          //     fontFamily: "DINAlternate-Bold, DINAlternate",
          //     foontWeight: "600",
          //   },
          // },
          {
            text: "万元",
            x: "35%",
            y: "27%",
            textStyle: {
              fontSize: fontSizeRem(0.14),
              color: "#FFFFFF",
              fontWeight: "100",
            },
          },
        ],
        // backgroundColor: '#111',
        polar: {
          radius: ["73%", "85%"],
          center: ["45%", "30%"],
        },
        angleAxis: {
          max: 100,
          show: false,
        },
        radiusAxis: {
          type: "category",
          show: true,
          axisLabel: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        series: [
          {
            name: "",
            type: "bar",
            roundCap: true,
            barWidth: 300,
            showBackground: true,
            backgroundStyle: {
              color: "#15648B",
            },
            data: [progressData.completeProportion],
            coordinateSystem: "polar",
            itemStyle: {
              normal: {
                color: "#61B5F7",
                // new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                //   {
                //     offset: 0,
                //     color: "#16CEB9",
                //   },
                //   {
                //     offset: 1,
                //     color: "#6648FF",
                //   },
                // ]),
              },
            },
          },
          // {
          //   name: "",
          //   type: "pie",
          //   startAngle: 80,
          //   radius: ["85%"],
          //   hoverAnimation: false,
          //   center: ["45%", "30%"],
          //   itemStyle: {
          //     color: "rgba(66, 66, 66, .1)",
          //     borderWidth: fontSizeRem(0.014),
          //     borderColor: "#5269EE",
          //   },
          //   data: [100],
          // },
          {
            name: "",
            type: "pie",
            startAngle: 80,
            radius: ["65%"],
            hoverAnimation: false,
            center: ["45%", "30%"],
            itemStyle: {
              color: "#1A416B",
              borderWidth: fontSizeRem(0.02),
              borderColor: "#61B5F7",
            },
            data: [100],
          },
          /*内部*/
          {
            type: "pie",
            radius: ["0", "10%"],
            center: ["45%", "24%"],
            z: 8,
            hoverAnimation: false,
            data: [
              {
                name: "检查进度",
                value: progressData.completeInvestment,
                label: {
                  normal: {
                    formatter: function (params) {
                      return params.value;
                    },
                    color: "#FFFFFF",
                    fontSize: fontSizeRem(0.2),
                    fontWeight: "bold",
                    position: "center",
                    show: true,
                  },
                },
                labelLine: {
                  show: false,
                },
              },
            ],
          },
        ],
      };
      option && myChart2.setOption(option);
      // myChart2.resize();
    };
    // const center = ref({ lng: 0, lat: 0 });
    // const zoom = ref(3);
    // const map = ref(null);
    // const BMap = ref(null);
    // const init = ({ BMap, map }) => {
    //   map.value = map;
    //   BMap.value = BMap;
    //   center.value.lng = 116.404;
    //   center.value.lat = 39.915;
    //   zoom.value = 15;
    // };
    return {
      progressData,
      projectChart,
      outputChart,
      currentMap,
    };
  },
};
</script>

<style lang="scss" scoped>
.content {
  z-index: 100;
  display: flex;
  justify-content: space-between;
  .side {
    z-index: 100;
  }
  .project {
    width: 100%;
    height: 3rem;
  }
  .project-info {
    padding: 0.25rem;
    border-radius: 0.1rem;
    background: rgba(97, 181, 247, 0.3);
  }
  .schedule {
    position: relative;
    display: flex;
    .output {
      width: 100%;
      height: 3rem;
    }
    .investment {
      position: absolute;
      top: 35px;
      left: 68px;
      font-size: 30px;
    }
    .info {
      width: 6rem;
      margin-top: 0.3rem;
      p {
        margin-top: 0.1rem;
        .label {
          display: inline-block;
          width: 1.2rem;
          color: rgba(97, 181, 247, 1);
        }
        .count {
          font-size: 0.25rem;
        }
        .proportion {
          color: rgba(121, 238, 250, 1);
          font-size: 0.25rem;
        }
      }
    }
  }
  img,
  video {
    width: 100%;
    border-radius: 0.2rem;
  }
}
.map {
  width: 100%;
  height: 45vw;
}
</style>
